<template>
	<div>
		<div class="mobile_navbar" v-show="showmenu" @click="showmenu = false">
			<div class="box" @click.stop="showmenu = true">
				<router-link to="/"><img src="@/assets/images/fotlogo.png" class="logos" /></router-link>
				<ul>
					<li :class="{'on':current == 0}">
						<router-link to="/">{{ $t('nav.home') }}</router-link>
					</li>
					<li :class="{'on':current == 1}">
						<router-link to="/products">{{ $t('nav.products') }} <i></i></router-link>
						<div class="icon" :class="{'on':showchild}" @click="showchild = !showchild"><img src="@/assets/images/rrs.png" /></div>
					</li>
					<div class="slide" v-show="showchild">
						<router-link to="/team3">{{ $t('products.halfDayTrip.title')}}</router-link>
						<router-link to="/team2">{{ $t('products.privateCharter.title')}}</router-link>
						<router-link to="/team1">{{ $t('products.sunsetCruise.title')}}</router-link>
					</div>
					<li :class="{'on':current == 2}">
						<router-link to="/team4">{{ $t('nav.about') }}</router-link>
					</li>
					<li :class="{'on':current == 3}">
            <router-link to="/gallery">{{ $t('nav.gallery') }}</router-link>
					</li>
					<li :class="{'on':current == 4}">
						<router-link to="/contact">{{ $t('nav.contact') }}</router-link>
					</li>
					<li :class="{'on':current == 5}">
						<router-link to="/faq">{{ $t('faq.title')}}</router-link>
					</li>
          <li :class="{'on':current == 6}" v-if="isLoggedIn">
            <router-link to="/orderList">{{ $t('nav.order')}}</router-link>
          </li>
				</ul>
			</div>
		</div>
		<div class="mobile_header">
			<div class="lang">
				<div class="line">
					<img src="@/assets/images/global.png" class="icon" />
					<el-dropdown @command="switchLang" trigger="click">
						<span class="el-dropdown-link">
							{{ currentLang === 'ch' ? '简体中文' : currentLang === 'ch2' ? '繁体中文' : 'English' }}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item command="en">English</el-dropdown-item>
              <el-dropdown-item command="ch">简体中文</el-dropdown-item>
              <el-dropdown-item command="ch2">繁体中文</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
			<div class="link">
				<router-link to="/products">{{ $t('booking.bookNow')}}</router-link>
			</div>
      <div class="merchant-login">
        <template v-if="!isLoggedIn">
          <el-button type="text"  style="font-size: 18px;color: #ffffff" @click="showLoginModal = true">{{ $t('nav.merchantLogin') }}</el-button>
        </template>
        <template v-else>
          <el-dropdown @command="handleMerchantCommand" trigger="click">
								<span class="el-dropdown-link">
									{{ merchantName }}
									<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">{{ $t('nav.logout') }}</el-dropdown-item>
              <el-dropdown-item command="changePassword">{{ $t('nav.changePassword') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </div>
		</div>
		<div class="header" :class="scrollPosition > 0?'on':''">
			<div class="m">
				<router-link to="/"><img src="@/assets/images/logo.png" class="logo" /></router-link>
				<ul>
					<li :class="{'on':current == 0}">
						<router-link to="/">{{ $t('nav.home') }}</router-link>
					</li>
					<li :class="{'on':current == 1}">
						<router-link to="#">{{ $t('nav.products') }} <i></i></router-link>
						<div class="slide">
              <router-link to="/team3">{{ $t('products.halfDayTrip.title')}}</router-link>
              <router-link to="/team2">{{ $t('products.privateCharter.title')}}</router-link>
              <router-link to="/team1">{{ $t('products.sunsetCruise.title')}}</router-link>
						</div>
					</li>
					<li :class="{'on':current == 2}">
						<router-link to="/team4">{{ $t('nav.about') }}</router-link>
					</li>
					<li :class="{'on':current == 3}">
            <router-link to="/gallery">{{ $t('nav.gallery') }}</router-link>
					</li>
					<li :class="{'on':current == 4}">
						<router-link to="/contact">{{ $t('nav.contact') }}</router-link>
					</li>
					<li :class="{'on':current == 5}">
						<router-link to="/faq">{{ $t('faq.title')}}</router-link>
					</li>
          <li :class="{'on':current == 6}" v-if="isLoggedIn">
            <router-link to="/orderList">{{ $t('nav.order')}}</router-link>
          </li>
				</ul>
				<div class="right">
					<div class="link">
						<router-link to="/products">{{ $t('booking.bookNow')}}</router-link>
					</div>
					<div class="lang">
						<div class="line">
							<img src="@/assets/images/lang.png" class="icon" />
              <el-dropdown @command="switchLang" trigger="click">
						<span class="el-dropdown-link">
							{{ currentLang === 'ch' ? '简体中文' : currentLang === 'ch2' ? '繁体中文' : 'English' }}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="en">English</el-dropdown-item>
                  <el-dropdown-item command="ch">简体中文</el-dropdown-item>
                  <el-dropdown-item command="ch2">繁体中文</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>

						</div>
					</div>
					<div class="merchant-login">
						<template v-if="!isLoggedIn">
							<el-button type="text" @click="showLoginModal = true">{{ $t('nav.merchantLogin') }}</el-button>
						</template>
						<template v-else>
							<el-dropdown @command="handleMerchantCommand" trigger="click">
								<span class="el-dropdown-link">
									{{ merchantName }}
									<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="changePassword">{{ $t('nav.changePassword') }}</el-dropdown-item>
                  <el-dropdown-item command="logout">{{ $t('nav.logout') }}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</template>
					</div>
				</div>
				<div class="menu" @click="showmenu = true"></div>
			</div>
		</div>
		<div class="null"></div>
		<el-dialog
			:title="$t('login.title')"
			:visible.sync="showLoginModal"
			width="400px"
			:close-on-click-modal="false"
			center>
			<el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-width="0">
				<el-form-item prop="email">
					<el-input v-model="loginForm.email" :placeholder="$t('login.email')">
						<template slot="prepend">
							<i class="el-icon-user"></i>
						</template>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input v-model="loginForm.password" type="password" :placeholder="$t('login.password')">
						<template slot="prepend">
							<i class="el-icon-lock"></i>
						</template>
					</el-input>
				</el-form-item>
        <el-form-item>
          <el-button type="text" @click="toApply">{{ $t("apply.title")}}</el-button>
        </el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showLoginModal = false">{{ $t('common.cancel') }}</el-button>
				<el-button type="primary" @click="handleLogin" :loading="loginLoading">{{ $t('common.submit') }}</el-button>
			</span>
		</el-dialog>
		<el-dialog
			:title="$t('nav.changePassword')"
			:visible.sync="showPasswordModal"
			width="400px"
			:close-on-click-modal="false"
			center>
			<el-form :model="passwordForm" :rules="passwordRules" ref="passwordForm" label-width="0">
				<el-form-item prop="oldPassword">
					<el-input v-model="passwordForm.oldPassword" type="password" :placeholder="$t('password.oldPassword')" />
				</el-form-item>
				<el-form-item prop="newPassword">
					<el-input v-model="passwordForm.newPassword" type="password" :placeholder="$t('password.newPassword')" />
				</el-form-item>
				<el-form-item prop="confirmPassword">
					<el-input v-model="passwordForm.confirmPassword" type="password" :placeholder="$t('password.confirmPassword')" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showPasswordModal = false">{{ $t('common.cancel') }}</el-button>
				<el-button type="primary" @click="handlePasswordChange" :loading="passwordLoading">{{ $t('common.submit') }}</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import { http } from "@/api/api";
  export default {
		props: {
			current: {
        type: [String, Number],
        default: 0
      }
		},
		name: 'foot',
		data() {
			return {
				showmenu: false,
				showchild: false,
				scrollPosition: 0,
				currentLang: localStorage.getItem('lang') || 'en',
				showLoginModal: false,
				showPasswordModal: false,
				loginLoading: false,
				passwordLoading: false,
				loginForm: {
					email: '',
					password: '',
          role: 2
				},
				passwordForm: {
					oldPassword: '',
					newPassword: '',
					confirmPassword: ''
				},


			}
		},
    computed: {
      merchantName() {
        return this.$store.state.userInfo ?  this.$store.state.userInfo.email : ''
      },
      isLoggedIn() {
        return this.$store.state.userInfo ? true : false
      },
      passwordRules() {
        const validateConfirmPassword = (rule, value, callback) => {
          console.log('this.passwordForm',this)
            if (value !== this.passwordForm.newPassword) {
            callback(new Error(this.$t('password.notMatch')));
          } else {
            callback();
          }
        }
        return {
          oldPassword: [{ required: true, message: this.$t('password.oldPassword'), trigger: 'blur' }],
          newPassword: [{ required: true, message: this.$t('password.newPassword'), trigger: 'blur' }],
          confirmPassword: [
            { required: true, message: this.$t('password.confirmPassword'), trigger: 'blur' },
            { validator: validateConfirmPassword, trigger: 'blur' }
          ]
        }
      },
      loginRules() {
        return {
          email: [
            { required: true, message: this.$t('login.emailRequired'), trigger: 'blur' }
          ],
          password: [
            { required: true, message: this.$t('login.passwordRequired'), trigger: 'blur' }
          ]
        }
      }
    },
		methods: {
			updateScrollPosition() {
				this.scrollPosition = window.scrollY
			},
			switchLang(command) {
				this.currentLang = command;
				this.$i18n.locale = command;
				localStorage.setItem('lang', command);
			},
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						this.loginLoading = true;
						// TODO: Replace with actual API call
						http.login(this.loginForm).then(res => {
              this.$store.commit('setUserInfo', res.data)
              this.loginLoading = false;
              this.showLoginModal = false;
              this.$message.success(this.$t('login.success'));
              this.loginForm.email = '';
              this.loginForm.password = '';
              // 刷新当前页面
              location.reload();
            }).catch(() => {
              this.loginLoading = false
            })
					}
				});
			},
			handleMerchantCommand(command) {
				if (command === 'logout') {
          this.$store.commit('logout')
					this.$message.success(this.$t('login.logoutSuccess'));
          location.reload();
				} else if (command === 'changePassword') {
					this.showPasswordModal = true;
				}
			},
			async handlePasswordChange() {
				this.$refs.passwordForm.validate(async (valid) => {
					if (valid) {
						this.passwordLoading = true;
						try {
							await http.user.updatePassword({
                id: this.$store.state.userInfo.id,
								oldPassword: this.passwordForm.oldPassword,
								newPassword: this.passwordForm.newPassword
							});
							this.$message.success(this.$t('password.success'));
							this.$refs.passwordForm.resetFields();
              this.$store.commit('logout')
              this.showPasswordModal = false;
						} catch (error) {
							// this.$message.error(this.$t('password.error'));
						} finally {
							this.passwordLoading = false;
						}
					}
				});
			},
      toApply() {
        this.$router.push({
          path: '/apply'
        })
      }
		},
		mounted() {
			window.addEventListener('scroll', this.updateScrollPosition);
		},
		Unmounted() {
			window.removeEventListener('scroll', this.updateScrollPosition);
		}
	}
</script>

<style lang="less" scoped>
.lang-switch {
	display: flex;
	align-items: center;
	span {
		cursor: pointer;
		padding: 0 5px;
		&.active {
			color: #007bff;
		}
		&.divider {
			cursor: default;
			color: #ccc;
		}
	}
}
.el-dropdown-link {
	cursor: pointer;
	display: flex;
	align-items: center;
	color: #333;
	.el-icon-arrow-down {
		margin-left: 5px;
	}
}
.merchant-login {
	margin-left: 20px;
	.el-dropdown-link {
		cursor: pointer;
		color: #333;
		&:hover {
			color: #409EFF;
		}
	}
}
.mobile_header {
  .el-dropdown-link {
    color: #ffffff !important;
  }
}
.el-dialog {
	.el-input-group__prepend {
		background-color: #fff;
	}
}
</style>
